<template>
    <div id="login">
        <head-top>
            <h1 slot="title" >登录</h1>
        </head-top>
        <div class="container">
            <form>
                <section id="form-login"  class="block form-horizontal">
                    <div class="item form-item  clearfix">
                        <div class="form-item-label fl">
                            <label class="required">账户:</label>
                        </div>
                        <div class="form-item-control-wrapper fl">
                            <div class="form-item-control">
                                <input type="text"  v-model="user.username"  class="input" placeholder="手机号注册账号">
                            </div>
                        </div>
                    </div>
                    <div class="item form-item  clearfix">
                        <div class="form-item-label fl">
                            <label >密码:</label>
                        </div>
                        <div class="form-item-control-wrapper fl">
                            <div class="form-item-control">
                                <input type="password" v-model="user.password" class="input">
                            </div>
                        </div>
                    </div>
                </section>
            </form>
            {{user.username}}
            {{user.password}}
            <div class="btn btn-login" @click="loginHandle" >登录</div>
            <router-link class="registr" to="/registr" >手机号码快速注册</router-link>
            <router-link class="retrieve" to="/">找回密码</router-link>

        </div>
        <foot-menu></foot-menu>

    </div>
</template>

<script>
    import headTop from '../../components/header/headTop'
    import footMenu from '../../components/footer/footMenu.vue'
    import  minNotice  from '../../components/minNotice';

    import {mapActions,mapGetters} from "vuex";
    export default{
        data() {
            return {
                user:{
                    username:"",
                    password:""
                }
            }
        },
        components: {
            headTop,
            footMenu
        },
        computed:{
            ...mapGetters([
                "visitPath"
            ])
        },
        methods:{
            ...mapActions([
                "loginPostDispatch"
            ]),
            loginHandle(){
                var _this=this
                const loginData= {
                    username:this.user.username,
                    password:this.user.password
                };
                console.log(loginData)
                let authLogin= this.loginPostDispatch(loginData);

                authLogin.then(res=>{
                    console.log(11)
                    minNotice({
                        message:res.msg,
                        onClose(){
                            _this.$router.push(_this.visitPath)
                        }
                    })

                }).catch(res=>{
                    console.log(22)
                    minNotice({
                        message:res.msg
                    })
                })

            }
        }
    }
</script>
<style>
    @import '../../theme/ui/message.css';
</style>
<style lang="scss" scoped>

    #form-login{
        padding-left:3.5rem;
        margin-top:3rem;

    .form-item{
        position: relative;
        padding:0.5rem 0 0.3rem;

    .form-item-label{
        position: absolute;
        left: -3rem;
        top: 0.55rem;

    label{
        font-size:0.7rem;
        font-weight: bold;
    }
    }
    .form-item-control-wrapper{
        width: 85%;
    }
    .input{
        border: none;
    }
    }

    }
    .btn-login{
        display: block;
        background-color: #6bd968;
        color: #ffffff;
        text-align: center;
        line-height: 1.5rem;
        font-size: 0.8rem;
        margin: 1rem 1rem 0.6rem;
    }
    .registr{
        color: #0088cc;
        float: left;
        margin-left: 1rem;
    }
    .retrieve{
        float: right;
        margin-right:1rem
    }

</style>